<template>
  <div class="_wrap">
    <subTit title="年龄段情况"/>
    <div class="chartBox">
      <div class="_bar d-flex align-items-c">
        <div class="item" v-for="(item, index) in list" :key="index" :style="{'--width': item.rate+'%', '--color': color[index]}">
          <div></div>
        </div>
      </div>
      <div class="_legend">
        <div class="itemGap" v-for="(item, index) in list" :key="index">
          <i :style="{'--color': color[index]}"></i>
          <div class="label">{{item.label}}</div>
          <div class="value"><count-to class="val" :start-val="0" :end-val="item.value" :duration="3600" /></div>
          <div class="unit">人</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import _ from 'lodash'
  import countTo from 'vue-count-to'
  import subTit from '../components/subTit'
  export default {
    name: 'itemLeftCenter',
    components: { countTo, subTit },
    data() {
      return {
        color:['#0079FF','#00BAFF','#6CD2FF','#3FFFED','#3FFFBA', '#FFBE00', '#FF6A00', '#F67FFF'],
        list:[],
      }
    },
    mounted() {
      let data = [
        { label: '20-25周岁', value: 1175 },
        { label: '26-30周岁', value: 2968 },
        { label: '31-35周岁', value: 2329 },
        { label: '36-40周岁', value: 1693 },
        { label: '41-45周岁', value: 1463 },
        { label: '46-50周岁', value: 997 },
        { label: '51-55周岁', value: 846 },
        { label: '56-60周岁', value: 696 }
      ]
      this.list = this.rateDataFormat(data)
    },
    methods: {
      rateDataFormat(data){
        let total = _.sumBy(data, (o)=> { return Number(o.value) })
        return _.map(data, (item) => {
          return {
            ...item,
            rate: ((item.value / total) * 100).toFixed(2)
          }
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  ._wrap {
    width: 100%;
    .chartBox {
      padding-top: 20px;
      ._bar {
        width: 100%; height: 42px;
        .item {
          width: var(--width); height: 100%; padding-right: 2px; position: relative;
          &:before { content: ''; display: block; width:2px; height: 100%; background-color: var(--color); position: absolute; top: 0; right:2px;}
          div { width: 100%; height: 100%; background-color: var(--color); opacity: 0.32; }
        }
      }
      ._legend {
        padding: 0 24px;
        display: grid; grid-template-columns: 1fr 1fr;
        .itemGap {
          display: flex; align-items: center; margin-top: 18px;
          i{ display: block; width: 4px; height: 12px; background-color: var(--color); margin-right: 4px; }
          .label { font-size: 16px; letter-spacing: 0.96px; font-family: PingFangSC; }
          .value {
            margin-left: 12px; margin-right: 8px;
            .val { font-size: 20px; color: #00FFFC; font-family: DINPro; }
          }
          .unit { font-size: 14px; font-family: PingFangSC; }
          &:nth-child(2n) {
            justify-content: flex-end;
          }
        }
      }
    }
  }
</style>
